<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>淘宝</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            .tb-promo {
                position: relative;
                width: 170px;
                height: 190px;
                background-color: pink;
                margin: 100px auto;
            }
            .tb-promo img {
                width: 170px;
                height: 190px;
            }
            .prev,
            .next {
                position:absolute;
                top: 50%;
                margin-top: -15px;
                width: 20px;
                height: 30px;
                background-color: black;
                text-align: center;
                line-height: 30px;
                color: white;
                text-decoration: none;

            }
            .prev {
                left: 0;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
            }
            .next {
                right: 0;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
            }
            .promo-nav {
                position: absolute;
                bottom: 15px;
                left: 50%;
                margin-left: -35px;
                width: 70px;
                height: 13px;
                background-color: rgba(255,255,255, .3);
                border-radius: 7px;

            }
            .promo-nav li {
                float: left;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #fff;
                margin: 3px;
            }
            .promo-nav .selected {
                background-color: #ff5000;
            }
        </style>
    </head>
    <body>
        <div class="tb-promo">
            <img src="作业素材/left02.png" alt="">
            <a href="#" class="prev"> &lt; </a>
            <a href="#" class="next"> &gt; </a>
            <ul class="promo-nav">
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>